<template>
  <div>
    <el-image src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg27eLgwYonYO9pwIwgA84rAI.png.webp" width="100%"/>
      <el-container class="layout-container">
        <!--侧边栏-->
        <el-aside width="150px" class="layout-aside-new">
          <el-menu
              :router=true
              :default-active="activeMenuItemPath"
              class="el-menu-vertical-demo"
              background-color="#fff"
              text-color="#000"
              active-text-color="#00f">
              <el-menu-item index="/product/news/industry">
              <i class="el-icon-menu"></i>
              <span slot="title">行业资讯</span>
            </el-menu-item>
              <el-menu-item index="/product/news/technology">
              <i class="el-icon-menu"></i>
              <span slot="title">技术干货</span>
            </el-menu-item>
              <el-menu-item index="/product/news/trends">
              <i class="el-icon-menu"></i>
              <span slot="title">公司动态</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!--主体部分-->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeMenuItemPath:'',
    };
  },

  methods: {
    // 封装方法
    handleActiveMenuItem() {
      // 调用参数
      let currentPath = this.$router.currentRoute.path
      this.activeMenuItemPath = currentPath;
    },


  },
  //准备就绪
  mounted() {
    // 调用handleActiveMenuItem方法
    this.handleActiveMenuItem();
  },
}
</script>

<style scoped>
.layout-container {
  width: 1200px;
  margin: 0 auto;
}
.layout-aside-new {
  margin-top: 30px;
}
</style>